//入口文件
import Vue from '../node_modules/vue/dist/vue.js'
///////////////////////////////////// 安装路由/////////////////////////////////////////////
import VueRouter from 'vue-router'
Vue.use(VueRouter)//需要用这句
/////////////////////////////导入axios///////////////////////////////////////////////////////
import axios from 'axios';
import qs from 'qs';
axios.defaults.baseURL='http://www.liulongbin.top:3005'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 设置post的header为form表单提交的格式。
Vue.prototype.$axios=axios;
Vue.prototype.$qs=qs;
/////////////////////////////////////////////////////////////////////////
//引入bootstrap3.3.7
import 'bootstrap/dist/css/bootstrap.css'
////////////////////////// 导入mui的css文件///////////////////////////////////////////////////
import './lib/mui/css/mui.min.css'
//////////////////////////////引入mint-ui/////////////////////////////////////////////
// import {Header} from 'mint-ui'
// import { Swipe, SwipeItem , Button} from 'mint-ui';
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
// // 引入懒加载
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'//引入css文件
////////////////////////安装图片浏览插件////////////////////////////////////
import VuePreview from 'vue-preview'
// 默认安装
Vue.use(VuePreview);
// 带着参数安装
// Vue.use(VuePreview, {
//     mainClass: 'pswp--minimal--dark',
//     barsSize: {top: 0, bottom: 0},
//     captionEl: false,
//     fullscreenEl: false,
//     shareEl: false,
//     bgOpacity: 0.85,
//     tapToClose: true,
//     tapToToggleControls: false
//   })
/////////////////////////////////////////////////////////////////////////////////////
// 按需导入，还需要Vue.component 注册按钮组件
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
//////////////////////////////按需导入vant///////////////////////////////////////////////
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar).use(TabbarItem);
import { Grid, GridItem } from 'vant';
Vue.use(Grid).use(GridItem);
import { Icon } from 'vant';
Vue.use(Icon);
import { Tab, Tabs } from 'vant';
Vue.use(Tab).use(Tabs);
import { Search } from 'vant';
Vue.use(Search);
import { Button } from 'vant';
Vue.use(Button);

import {
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton
} from 'vant';

Vue
  .use(GoodsAction)
  .use(GoodsActionIcon)
  .use(GoodsActionButton);
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe).use(SwipeItem);

import { Sku } from 'vant';//商品规格
Vue.use(Sku);
import { Dialog } from 'vant';//这可以是一个函数，也可以是一个组件！
Vue.use(Dialog);   
import { Stepper } from 'vant';
Vue.use(Stepper);

import { SubmitBar } from 'vant';
Vue.use(SubmitBar);

import { Card } from 'vant';
Vue.use(Card);

import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox).use(CheckboxGroup);

import { NavBar } from 'vant';
Vue.use(NavBar);
////////////////////////////////////引入使用element/////////////////////////////////////////////
// import { Image} from 'element-ui';
// Vue.use(Image)
import {InputNumber} from 'element-ui'
Vue.use(InputNumber)
// import {Icon} from 'element-ui'
// Vue.use(Icon);
// import ElementUI from 'element-ui';
// import '../node_modules/element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);

//////////////////////////////////////////////////////////////////////////////////////////////
import './css/index.scss'


import app from './vue/app.vue'
import './css/index.css'
import './lib/mui/css/icons-extra.css'
import './js/index.js'
import {router} from './js/router.js'
import moment from 'moment'
/////////////////////////////////创建仓储实例///////////////////////////////////////////////////
import Vuex from 'vuex';
Vue.use(Vuex);
var temp=[];
//localStorage.clear();
if(window.localStorage){//判断浏览器是否只是localStorage
  // temp=localStorage.getItem('car');这一句没有将获取的值变成对象数组
  temp=JSON.parse(localStorage.getItem('car'));
  //console.log(JSON.parse(temp));
}
// var car=Json.parse(localStorage.getItem('car')||[]);//每当进入这个页面，就在本地仓储中找到数据并赋值
const store=new Vuex.Store({
  state:{//使用this.$store.state引用
    car:temp,
    acount_price:0
  },
  mutations:{//使用this.$store.commit  ('方法的名称', 传入的唯一一个参数名)、、备注：只能传一个值，使用对象就好了
    add_to_car(state, goods){
      var flag=false;
      if(state.car!=null){//加这一句是预防第一次读取的时候car为空，函数不能用的情况
        state.car.forEach(item=>{
          if(item.id==goods.id){
            item.cou+=goods.cou;
            flag=true;
          }
        })
        if(flag==false){
          state.car.push(goods);
        }
      }else{
        state.car=[goods];
      }
      localStorage.setItem('car', JSON.stringify(state.car));
    },
    update_goods_num(state, value){
      state.car.forEach(item=>{
        if(item.id==value.id){
          item.cou=value.new_num;
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car));
    },
    change_select(state,value){
      state.car.forEach(item=>{
        if(item.id==value.id){
          item.selected=!value.selected;
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car));
    },
    del_goods(state, del_id){
      for(i=0; i<state.car.length; i++){
        if(state.car[i].id==del_id){
          state.car.splice(i,1);
          localStorage.setItem('car', JSON.stringify(state.car));
          break;
        }
          
      }
    }
    
  },
  getters:{//使用this.$store.getters.***  
     show_num(state){
       console.log(this.state);
        if(state.car!=null){
          return state.car.length;
        }else{
          return 0;
        }
     },
     total_price(state){
        var price=0;
       state.car.forEach(item=>{
          if(item.selected){
            price+=item.sell_price*item.cou;
          }
        })
        return price;
     }

  }
})
////////////////////////////////////////////////创建时间过滤器，使用了moment插件。///////////////////////////////////////////////
Vue.filter('dateFormat', function(dateStr, pattern="YYYY-MM-DD HH:mm:ss"){
    return moment(dateStr).format(pattern);
})
var vm=new Vue({
    el:'#app',
    data:{
        msg:'{这是vue实例中的data-msg}'
    },
    methods:{
      init_car(){
        this.$store.state.car.forEach(item=>{
          item.selected=false;
        })
      },
        get_acount_price(id,select,cou, one_price){
            this.$store.state.car.forEach(element => {
                if(element.id==id){
                    element.selected=!select;
                    element.cou=cou;//
                    console.log(element.selected);
                    if(element.selected){//如果为真，表示选中
                    console.log(cou+ '-'+ one_price);
                    
                        this.acount_price+=cou*one_price;
                    }else{//如果为假，表示没选中
                        this.acount_price-=cou*one_price;
                    }
                }
                localStorage.setItem('car',JSON.stringify(this.$store.state.car));
                
            });
            console.log(this.acount_price);
        }
    },
    render : c=>c(app),
    router:router,
    store:store,//挂载store状态管理对象
    created(){
      this.init_car();
      
    }

})


